<template>
  <div class="dashboard-container">
    <!-- <div class="dashboard-text">name: {{ name }}</div> -->
    <!--    <el-button type="primary" size="medium" @click="add_click">新增</el-button>-->
    <!--    <el-button type="primary" size="medium" @click="create_luckysheet_click">创建表格</el-button>-->
    <!--    <el-button type="primary" size="medium" @click="downLoad_click">下载表格</el-button>-->
    <!--    <el-button type="primary" size="medium" @click="operation_click">操作表格</el-button>-->
    <!--    <input style="font-size:16px;" type="file" @change="uploadExcel"/>-->
    <!--    <el-dialog-->
    <!--      title="在线预览"-->
    <!--      :visible.sync="preview_dialogVisible"-->
    <!--      width="80%">-->
    <!--      <preview-->
    <!--        url="https://www.yns-etc.com/lysword.docx"-->
    <!--      />-->
    <!--    </el-dialog>-->
    <!--    <div id="luckysheet"-->
    <!--         style="margin:0px;padding:0px;width:100%;height:800px;left: 0px;top: 0px;"></div>-->

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import preview from '@/components/OfficePreview/preview'
import LuckyExcel from 'luckyexcel'
// 导入库export.js 这个文件是es6的，不能在普通的HTML文件直接引入js文件（虽然都是js文件，但是有区别，具体请百度es6与es5）！需要把es6转es5才可以直接引入使用！
import { testaaa, exportExcel } from './export'

export default {
  name: 'Dashboard',
  components: {
    preview
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
  },
  data() {
    return {
      preview_dialogVisible: false
    }
  },
  methods: {
    add_click() {
      console.log('add_click')

      // let routeUrl = 'https://www.yns-etc.com/lysword.docx'
      // let url = encodeURIComponent(routeUrl)
      // let officeUrl = 'http://view.officeapps.live.com/op/view.aspx?src=' + url
      // window.open(officeUrl, '_target')

      this.preview_dialogVisible = true
    },

    create_luckysheet_click() {
      // 配置项
      var options = {
        container: 'luckysheet', // luckysheet为容器id
        title: 'zzh', // 表头名
        lang: 'zh', // 中文
        functionButton: '<button id="download" @click="downLoad_click" class="btn btn-primary" style="padding:3px 6px;font-size: 12px;margin-right: 10px;">下载</button>',
        data: [
          {
            'name': '表1', // 工作表名称
            'color': 'red', // 工作表颜色
            'row': 20, // 行数
            'column': 8, // 列数
            'celldata': [
              {
                'r': 0,
                'c': 0,
                'v': {
                  ct: { fa: 'General', t: 'g' },
                  m: '车站值班站长工作日志',
                  v: '车站值班站长工作日志'
                },
                'ht': 0, // 水平居中
                'vt': 0 // 垂直居中
              },
              {
                'r': 1,
                'c': 0,
                'v': {
                  ct: { fa: 'General', t: 'g' },
                  m: '当班值班站长',
                  v: '当班值班站长'
                }
              },
              {
                'r': 2,
                'c': 0,
                'v': {
                  ct: { fa: 'General', t: 'g' },
                  m: '当班情况',
                  v: '当班情况'
                }
              },
              {
                'r': 2,
                'c': 1,
                'v': {
                  ct: { fa: 'General', t: 'g' },
                  m: '岗位安排',
                  v: '岗位安排'
                }
              },
              {
                'r': 3,
                'c': 1,
                'v': {
                  ct: { fa: 'General', t: 'g' },
                  m: '姓名',
                  v: '姓名'
                }
              },
              {
                'r': 3,
                'c': 2,
                'v': {
                  ct: { fa: 'General', t: 'g' },
                  m: '岗位',
                  v: '岗位'
                }
              },
              {
                'r': 3,
                'c': 3,
                'v': {
                  ct: { fa: 'General', t: 'g' },
                  m: '姓名',
                  v: '姓名'
                }
              },
              {
                'r': 3,
                'c': 4,
                'v': {
                  ct: { fa: 'General', t: 'g' },
                  m: '岗位',
                  v: '岗位'
                }
              },
              {
                'r': 3,
                'c': 5,
                'v': {
                  ct: { fa: 'General', t: 'g' },
                  m: '姓名',
                  v: '姓名'
                }
              },
              {
                'r': 3,
                'c': 6,
                'v': {
                  ct: { fa: 'General', t: 'g' },
                  m: '岗位',
                  v: '岗位'
                }
              },
              {
                'r': 10,
                'c': 1,
                'v': {
                  ct: { fa: 'General', t: 'g' },
                  m: '当班重要事件',
                  v: '当班重要事件'
                }
              },
              {
                'r': 10,
                'c': 2,
                'v': {
                  ct: { fa: 'General', t: 'g' },
                  m: '施工安全交底',
                  v: '施工安全交底'
                }
              }

            ],
            // 对象中的key为 r + '_' + c 的拼接值，value同主单元格的mc设置: r:行数，c:列数，rs：合并的行数，cs:合并的列数
            'config': {
              'merge': {
                '0_0': {
                  'rs': 1,
                  'cs': 8,
                  'r': 0,
                  'c': 0
                }
              }
            }
          }
        ]
      }
      luckysheet.create(options)

      // luckysheet.setCellValue(0, 2, {v: '尼玛币', bg:"#FF0000"})
      // luckysheet.insertRow(10)
    },

    operation_click() {
      const arr = ['李峣杉', 'iOS', '熊广博', 'Android', '李秋宇', 'JAVA', '李峣杉', 'iOS', '熊广博', 'Android', '李秋宇', 'JAVA', '李峣杉', 'iOS', '熊广博', 'Android', '李秋宇', 'JAVA']
      for (let i = 0; i < arr.length; i++) {
        if (i > 6) {
          luckysheet.setCellValue(4 + (i % 6), i + 1, arr[i])
        } else {
          luckysheet.setCellValue(4, i + 1, arr[i])
        }
      }
      // luckysheet.setCellValue(5, 5, 1)
    },

    downLoad_click() {
      console.log('downLoad_click')
      exportExcel(luckysheet.getAllSheets(), '下载')
    },

    uploadExcel(evt) {
      const files = evt.target.files
      if (files == null || files.length == 0) {
        alert('No files wait for import')
        return
      }
      const name = files[0].name
      const suffixArr = name.split('.'); const suffix = suffixArr[suffixArr.length - 1]
      if (suffix != 'xlsx') {
        alert('Currently only supports the import of xlsx files')
        return
      }
      console.log('files', files)
      LuckyExcel.transformExcelToLucky(files[0], function(exportJson, luckysheetfile) {
        if (exportJson.sheets == null || exportJson.sheets.length == 0) {
          alert('Failed to read the content of the excel file, currently does not support xls files!')
          return
        }
        window.luckysheet.destroy()

        window.luckysheet.create({
          container: 'luckysheet', // luckysheet is the container id
          showinfobar: false,
          data: exportJson.sheets,
          title: exportJson.info.name,
          userInfo: exportJson.info.name.creator
        })
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.dashboard {
    &-container {
      // margin: 30px;
      background-image: url('../../assets/index.png');
      width:100%;
      height: calc(100vh - 84px);
      background-position: 100% 100%;
      background-size: cover;
    }

    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
</style>
